<template>
  <div :class="cardClass">
    <div class="card-header" :class="{ 'big-header': isbigCard && rate }" v-if="title">
      <div class="card-title">
        <img v-if="icon" :src="iconUrl" class="card-icon" />
        <!-- 标题 -->
        <template v-if="isBigHeader">
          <span v-if="isBigHeader">{{ title }} </span>
          <a-tooltip v-if="tooltipList">
            <icon-question-circle class="card-help-icon" />
            <template #content>
              <div v-for="(item, index) in tooltipList" :key="index">{{ item }}</div>
            </template>
          </a-tooltip>
        </template>
        <a-typography-paragraph
          style="margin: 0; line-height: 22px; flex: 1"
          v-else
          :ellipsis="{
            rows: 1,
            showTooltip: true,
          }"
        >
          <span>{{ title }}</span>
          <a-tooltip v-if="tooltipList" @click.stop>
            <icon-question-circle class="card-help-icon" />
            <template #content>
              <div v-for="(item, index) in tooltipList" :key="index">{{ item }}</div>
            </template>
          </a-tooltip>
        </a-typography-paragraph>
      </div>
      <div class="rate-wrap" v-if="rate">
        <template v-if="!hideRate">
          <span style="margin-right: 10px"
            >同比<span :class="{ green: rate.tb > 0, red: rate.tb < 0 }">
              <span class="icon-arrow">
                <icon-arrow-up v-if="rate.tb > 0" />
                <icon-arrow-down v-if="rate.tb < 0" />
              </span>
              <span class="rate-value">
                <span v-if="rate.tb">{{ Math.abs(rate.tb) }}%</span>
                <span v-else>0%</span>
              </span>
            </span></span
          >
          <span style="white-space: nowrap"
            >环比<span :class="{ green: rate.hb > 0, red: rate.hb < 0 }">
              <span class="icon-arrow">
                <icon-arrow-up v-if="rate.hb > 0" />
                <icon-arrow-down v-if="rate.hb < 0" />
              </span>
              <span class="rate-value">
                <span v-if="rate.hb">{{ Math.abs(rate.hb) }}%</span>
                <span v-else>0%</span>
              </span>
            </span>
          </span>
        </template>
      </div>
    </div>
    <!-- 卡片内容 -->
    <div class="card-content">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
  /**
   * 通用卡片组件
   * @description 用于展示卡片内容,支持标题、图标、提示等配置
   * @example
   * <template>
   *   <!-- 带图标和提示 -->
   *   <card
   *     title="收入统计"
   *     icon="income"
   *     tooltip="这里是提示内容"
   *   >
   *     <template #extra>
   *       <a-button>操作</a-button>
   *     </template>
   *     卡片内容
   *   </card>
   * </template>
   * ```
   * @props {String} title - 卡片标题
   * @props {String} type - 卡片类型,可选值:rate-card/meta-card,默认rate-card
   * @props {String} icon - 标题图标名称,对应assets/revenue目录下的图片名
   * @props {String} tooltip - 标题提示内容
   * @slots default - 卡片内容
   * @slots extra - 卡片右上角内容
   */

  import { computed } from 'vue'

  const props = defineProps({
    title: {
      type: String,
      default: '',
    },
    icon: {
      type: String,
      default: '',
    },
    tooltip: {
      type: [String, Array],
      default: '',
    },
    // 同比环比
    rate: {
      type: Object,
    },
    hideRate: Boolean,
    bigSize: Boolean,
    hover: Boolean,
    // 颜色、样式
    color: String, // default | white | green | orange | purple
  })

  const isbigCard = computed(() => props.rate || props.bigSize)
  const isBigHeader = computed(() => {
    return isbigCard.value && props.rate
  })
  const cardClass = computed(() => {
    const classList = ['revenue-summary-card']
    if (isbigCard.value) {
      classList.push('big-card')
    }
    if (props.hover) {
      classList.push('card-hover')
    }
    if (props.color) {
      classList.push(`type-${props.color}`)
    }
    return classList
  })

  // 兼容数组
  const tooltipList = computed(() => {
    if (!props.tooltip) return ''
    if (typeof props.tooltip === 'string') {
      return [props.tooltip]
    } else if (Array.isArray(props.tooltip)) {
      if (props.tooltip.length == 0) return ''
      return props.tooltip
    }
    return ''
  })

  // icon从assets/revenue中获取,需要根据传入的icon名称动态获取对应的图片
  const iconUrl = new URL(`/src/assets/revenue/${props.icon}.png`, import.meta.url).href
</script>

<style lang="less" scoped>
  .revenue-summary-card {
    padding: 16px;
    background: #f7f8fa;
    border-radius: 4px;
    width: calc(16.6% - 16px);
    min-width: 208px;
    transform: auto;
    border: 1px solid #fff;

    &.big-card {
      min-width: 238px;
      width: calc(25% - 15px); // 每个子元素占25%宽度，减去gap的一半
    }
    &.card-hover {
      &:hover {
        border: 1px solid #3370ff;
        cursor: pointer;
      }
    }

    &.default {
      border: 1px solid #e7e7e7;
    }
    &.type-white {
      background: #ffffff;
    }
    &.type-green {
      background: #eefff0;
    }
    &.type-orange {
      background: #fff4e3;
    }
    &.type-purple {
      background: #f6f4ff;
    }
  }

  .card-icon {
    width: 22px;
    height: 22px;
    margin-right: 8px;
  }

  .card-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
    gap: 6px 0;
    &.big-header {
      border-bottom: 1px solid #e7e7e7;
      padding-bottom: 16px;
      margin-bottom: 16px;
      .card-title {
        width: inherit;
      }
    }
    .card-title {
      display: flex;
      align-items: center;
      font-weight: 600;
      font-size: 16px;
      color: #1d2129;
      line-height: 1;
      width: 100%;
    }
    .rate-wrap {
      font-size: 14px;
      color: #1d2129;
      line-height: 17px;
    }
  }

  .card-help-icon {
    margin: 0 6px;
    font-size: 16px;
  }

  .green {
    color: #00b42a;
  }
  .red {
    color: #f53f3f;
  }
  .icon-arrow {
    margin-left: 4px;
  }
</style>
